<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tp_individual_collect</title>
</head>
<body>
<!-- todo 引入vue和axois依赖-->
<!-- todo 四个按钮， 点击分别发送四种请求-->

<div id="app">
    <button @click="clickAction">
        发送click action
    </button>
    <button @click="jobCollect">
        发送job_collect action
    </button>
    <button @click="cvSend">
        发送cv_send action
    </button>
    <button @click="cvUpload">
        发送cv_upload action
    </button>

</div>


<script src="assets/vue@2.6.12"></script>
<script src="assets/axios.min.js"></script>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            userId: '1',
            jobCode: "123"
        },
        methods:{
            clickAction:function(){
                this.collect("click");
            },
            jobCollect:function(){
                this.collect("jobCollect");
            },
            cvSend:function(){
                this.collect("cvSend");
            },
            cvUpload :function(){
                this.collect("cvUpload");
            },




            collect:function(action){
                // 构造四个属性
                // todo 获取当前的时间戳
                var actTime = new Date().getTime();
                // 拼接形式 user_id\tact_time\taction\tjob_code
                var data = this.userId + "\t"
                                + actTime + "\t"
                                + action + "\t"
                                + this.jobCode ;
                axios.post("/kafka/tp_individual", data);
            }


        }
    })

</script>


</body>
</html>